<template>
  <div class="notes-container">
    <div class="notes-content">
      <div class="note-item" v-for="(item, index) in noteItems" :key="index">
        <div class="note-icon">
          <img :src="`/img/zhuyi/${index}.jpg`" :alt="item.title">
        </div>
        <div class="note-details">
          <h3>{{ item.title }}</h3>
          <router-link :to="`/article/${index + 2}`">
            <el-button type="primary" class="read-more-btn" >続きを読む</el-button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
  <CustomerService />
</template>

<script setup>
import { ref } from 'vue';
import CustomerService from '../components/CustomerService.vue'
const noteItems = ref([
  {
    title: '個人情報の取り扱い',
    description: '個人情報の取り扱いについて、プライバシーポリシーに基づいて適切に管理しています。個人情報は第三者に提供されることはありません。'
  },
  {
    title: '利用規約',
    description: 'サービスを利用する前に、利用規約をよくお読みください。利用規約に同意した上でサービスをご利用いただけます。'
  },
  {
    title: '仕事依頼ガイドライン',
    description: '仕事を依頼する際のガイドラインを確認してください。適切な依頼内容と報酬設定が重要です。'
  },
  {
    title: 'プライバシーポリシー',
    description: 'プライバシーポリシーでは、当サイトでのデータ収集と使用方法について説明しています。'
  },
  {
    title: '信用スコアルールと評価',
    description: '信用スコアと評価システムについて理解しておくことで、より良い取引環境を構築できます。'
  },
  {
    title: '会員レベルの権限',
    description: '会員レベルによって利用できる機能や権限が異なります。レベルアップの条件も確認しましょう。'
  },
  {
    title: '取引手数料',
    description: 'サービス利用時の取引手数料について説明します。透明性のある料金体系を提供しています。'
  },
  {
    title: '銀行口座異常問題',
    description: '銀行口座の登録や変更時に発生する可能性のある問題と解決方法について説明します。'
  }
]);
</script>

<style scoped>
.notes-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.notes-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.note-item {
  width: calc(25% - 15px);
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  margin-bottom: 10px;
}

.note-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.note-icon {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 20px;
}

.note-icon img {
  width: 215px;
  height: 128px;
  object-fit: contain;
}

.note-details {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.note-details h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.read-more-btn {
  font-size: 14px;
  padding: 8px 16px;
  width: 200px;
  background: linear-gradient(to right, #56b1f7, #0068b5) !important;
  border: none !important;
}

/* 移除router-link的下划线，特别是在iOS Safari中 */
.note-details a {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

.note-details a:hover,
.note-details a:focus,
.note-details a:active,
.note-details a:visited {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

@media (max-width: 992px) {
  .note-item {
    width: calc(33.33% - 15px);
  }
}

@media (max-width: 768px) {
  .note-item {
    width: calc(50% - 15px);
  }
  
  .note-icon {
    padding: 15px;
  }
  
  .note-icon img {
    width: 215px;
    height: 128px;
  }
}

@media (max-width: 576px) {
  .note-item {
    width: calc(50% - 10px);
  }
  
  .note-icon img {
    width: 215px;
    height: 128px;
  }
}

@media (max-width: 480px) {
  .note-item {
    width: 100%;
  }
}
</style>